<template>
    <div>
        <div class="box" style="margin-top: -20px;width: 100%;">
            <div style="display: flex;flex-wrap: wrap;clear: both;width: 100%;height: 30px;margin-left: 5%;margin-top: 2%;">
                <div style="width:30%">达标率：{{ titArr.dabiao }}%</div>
                <div style="width:30%">平均入网时间：{{ titArr.haoshi }}</div>
                <div style="width:32%">
                    <div class="dark-select">
                        地区选择：
                        <el-select class="sel" size="mini" v-model="value1" placeholder="请选择" :popper-append-to-body="false"
                            @change="selectAll($event)">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div id="xuke" style="width:100%;height:150px">

            </div>

        </div>
    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            value1: '全省',
            options: [
                {
                    id: '1',
                    name: '合肥市',
                    data: ['1.5', '1', '1.7', '1'],
                    chizheng: '36736',
                    lingshouhu: '159',
                    jinyinghu: '36252',
                    heding: '360',
                    baohe: '44.17%',
                    zhengchang: '122',
                    totle: '76.73%',
                    haoshi: '3.24',
                    dabiao: '99.60'
                },
                {
                    id: '2',
                    name: '芜湖市',
                    data: ['1.95', '1', '2', '1'],
                    chizheng: '14474',
                    lingshouhu: '36',
                    jinyinghu: '14406',
                    heding: '128',
                    baohe: '28.12%',
                    zhengchang: '24',
                    totle: '66.67%',
                    dabiao: '100',
                    haoshi: '2.12'
                },
                {
                    id: '3',
                    name: '蚌埠市',
                    data: ['1.8', '1', '1.34', '1'],
                    chizheng: '15451',
                    lingshouhu: '41',
                    jinyinghu: '15361',
                    heding: '154',
                    baohe: '26.62%',
                    zhengchang: '21',
                    totle: '51.22%',
                    dabiao: '100',
                    haoshi: '3.18'
                },
                {
                    id: '4',
                    name: '淮南市',
                    data: ['1.06', '1', '1.3', '1'],
                    chizheng: '13433',
                    lingshouhu: '30',
                    jinyinghu: '13369',
                    heding: '82',
                    baohe: '36.59%',
                    zhengchang: '14',
                    totle: '46.67%',
                    dabiao: '100',
                    haoshi: '2.41'
                },
                {
                    id: '5',
                    name: '马鞍山市',
                    data: ['2.2', '1', '1.6', '1'],
                    chizheng: '11872',
                    lingshouhu: '27',
                    jinyinghu: '11743',
                    heding: '60',
                    baohe: '45%',
                    zhengchang: '15',
                    totle: '55.56%',
                    dabiao: '100',
                    haoshi: '3.81'
                },
                {
                    id: '6',
                    name: '淮北市',
                    data: ['2.3', '1', '1.7', '1'],
                    chizheng: '9244',
                    lingshouhu: '22',
                    jinyinghu: '9153',
                    heding: '71',
                    baohe: '30.99%',
                    zhengchang: '16',
                    totle: '72.73%',
                    dabiao: '100',
                    haoshi: '3.91'
                },
                {
                    id: '7',
                    name: '铜陵市',
                    data: ['1.9', '1', '2.9', '1'],
                    chizheng: '8532',
                    lingshouhu: '19',
                    jinyinghu: '8456',
                    heding: '39',
                    baohe: '48.72%',
                    zhengchang: '11',
                    totle: '57.89%',
                    dabiao: '96.40',
                    haoshi: '4.78'
                },
                {
                    id: '8',
                    name: '安庆市',
                    data: ['1.95', '1', '2', '1'],
                    chizheng: '25771',
                    lingshouhu: '34',
                    jinyinghu: '25452',
                    heding: '131',
                    baohe: '25.95%',
                    zhengchang: '23',
                    totle: '67.65%',
                    dabiao: '97.20',
                    haoshi: '3.95'
                },
                {
                    id: '9',
                    name: '黄山市',
                    data: ['2.4', '1', '2.5', '1'],
                    chizheng: '9431',
                    lingshouhu: '13',
                    jinyinghu: '9361',
                    heding: '45',
                    baohe: '28.89%',
                    zhengchang: '7',
                    totle: '53.85%',
                    dabiao: '98.50',
                    haoshi: '4.88'
                },
                {
                    id: '10',
                    name: '滁州市',
                    data: ['2.1', '1', '1.7', '1'],
                    chizheng: '17923',
                    lingshouhu: '48',
                    jinyinghu: '17804',
                    heding: '107',
                    baohe: '44.86%',
                    zhengchang: '22',
                    totle: '45.83%',
                    dabiao: '99.30',
                    haoshi: '3.79'
                },
                {
                    id: '11',
                    name: '阜阳市',
                    data: ['2.6', '1', '1.3', '1'],
                    chizheng: '29347',
                    lingshouhu: '43',
                    jinyinghu: '29069',
                    heding: '137',
                    baohe: '31.39%',
                    zhengchang: '24',
                    totle: '55.81%',
                    dabiao: '99.50',
                    haoshi: '3.94'
                },
                {
                    id: '12',
                    name: '宿州市',
                    data: ['2', '1', '2.4', '1'],
                    chizheng: '26844',
                    lingshouhu: '30',
                    jinyinghu: '26587',
                    heding: '155',
                    baohe: '19.35%',
                    zhengchang: '14',
                    totle: '46.67%',
                    dabiao: '98.20',
                    haoshi: '4.45'
                },
                {
                    id: '13',
                    name: '六安市',
                    data: ['1.8', '1', '3', '1'],
                    chizheng: '22417',
                    lingshouhu: '36',
                    jinyinghu: '22261',
                    heding: '104',
                    baohe: '34.62%',
                    zhengchang: '23',
                    totle: '63.89%',
                    dabiao: '97.40',
                    haoshi: '4.83'
                },
                {
                    id: '14',
                    name: '亳州市',
                    data: ['2.8', '1', '1.7', '1'],
                    chizheng: '21029',
                    lingshouhu: '38',
                    jinyinghu: '20822',
                    heding: '128',
                    baohe: '29.69%',
                    zhengchang: '13',
                    totle: '34.21%',
                    dabiao: '99.80',
                    haoshi: '4.46'
                },
                {
                    id: '15',
                    name: '池州市',
                    data: ['2.1', '1', '2', '1'],
                    chizheng: '9564',
                    lingshouhu: '14',
                    jinyinghu: '9501',
                    heding: '49',
                    baohe: '28.57%',
                    zhengchang: '9',
                    totle: '68.75%',
                    dabiao: '99.30',
                    haoshi: '4.57'
                },
                {
                    id: '16',
                    name: '宣城市',
                    data: ['1.7', '1', '1.2', '1'],
                    chizheng: '15038',
                    lingshouhu: '32',
                    jinyinghu: '14894',
                    heding: '127',
                    baohe: '25.20%',
                    zhengchang: '22',
                    totle: '68.09%',
                    dabiao: '100',
                    haoshi: '2.93'
                },
                {
                    id: '17',
                    name: '全省',
                    data: ['2.04', '1', '1.74', '1'],
                    chizheng: '287106',
                    lingshouhu: '622',
                    jinyinghu: '284491',
                    heding: '1877',
                    baohe: '33.14%',
                    zhengchang: '380',
                    totle: '61.09%',
                    dabiao: '99.10',
                    haoshi: '3.79'
                }
            ],
            city: "",
            titArr:{}
        };
    },
    computed: {},
    mounted() {
        this.xukes()
    },
    watch: {

    },
    methods: {
        // 选择框事件
        selectAll(event) {
            this.options.forEach((item) => {
                if (item.name == event) {
                    this.xukes(item)
                }
            })
        },
        //5+5许可
        xukes(item) {
            let data
            if (item == undefined) {
                item = this.options[16]
                data = item.data
            } else if (item.data.length !== 0) {
                data = item.data
            }
            this.titArr=item
            let myChart = this.$echarts.init(document.getElementById("xuke"));
            let option = {
                title: {
                    text: '',
                    textStyle: {
                        align: 'center',
                        color: '#fff',
                        fontSize: 20,
                    },
                    //subtext: `达标率：${item.dabiao}%  平均入网时间：${item.haoshi}天   地区选择：`,
                    // top: '9%',
                    // left: '3%',
                    subtextStyle: {
                        color: "#fff"
                    }

                },
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top:'10%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: false,
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: 'white'

                        }
                    },
                    data: ['许可决定', '专卖入网', '营销入网', '物流入网']
                },
                yAxis: {
                    type: 'value',
                    // name: '单位：个',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                },
                series: [
                    {
                        type: 'line',
                        stack: 'Total',
                        data: data,
                    },

                ]
            };
            myChart.setOption(option);
        },
    },
    created() { },

};
</script>
<style lang="scss" scoped>
.box {
    position: relative
}

.sel {
    // position: absolute;
    // left: 32%;
    // top: 23px;
    width: 65%;
}

::v-deep .dark-select {
    input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.50);
    }

    input::-moz-input-placeholder {
        color: rgba(255, 255, 255, 0.50);
    }

    input::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.50);
    }

    // input框
    .el-select,
    .el-input,
    .el-input__inner {
        background-color: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.50);
        border: none; // 去掉边框
        // border-color: #XXXXXX // 默认边框的颜色
        text-align: left;
        border-radius: 4px;
    }

    // 选中时边框颜色
    .el-input__inner:focus {
        border-color: rgba(255, 255, 255, 0.12);
    }

    // 鼠标悬浮时 input框颜色
    .el-input__inner:hover {
        background-color: rgba(255, 255, 255, 0.12);
    }

    // input框 右侧的箭头
    .el-select .el-input .el-select__caret {
        color: rgba(255, 255, 255, 0.50);
    }

    // option选项 上面的箭头
    .el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-bottom-color: rgba(43, 45, 55, 0.80);
        z-index: 9999;
    }

    .popper__arrow {
        border: none;
    }

    // option选项 最外层
    .el-select-dropdown {
        border: none !important;
        background: rgba(8, 8, 57, 1) !important;
        z-index: 9999;
    }

    // option选项 文字样式
    .el-select-dropdown__item {
        color: rgba(255, 255, 255, 0.781) !important;
        z-index: 9999;
    }

    .el-select-dropdown__item.selected span {
        color: #fff !important;
        z-index: 9999;
    }

    // 移入option选项 样式调整
    .el-select-dropdown__item.hover {
        background-color: rgba(255, 255, 255, 0.06);
        color: rgb(70, 109, 216) !important;
        z-index: 9999;
    }

    // 下拉框垂直滚动条宽度
    .el-scrollbar__bar.is-vertical {
        width: 5px;
        top: 2px;
    }

    // 下拉框最大高度
    .el-select-dropdown__wrap {
        max-height: 150px;
    }
}
</style>